<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>注册-智能家居系统</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"/>
</head>
<body>

<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="javascript:;">智能家居系统</a>
    </div>

    <div class="collapse navbar-collapse" id="navbar-collapse">
        <ul class="nav navbar-nav navbar-right">
            <li><a href="/pages/signup"><span class="glyphicon glyphicon-user"></span> 注册</a></li>
            <li><a href="/pages/signin"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li>
        </ul>
    </div>
</nav>


<div class="container">
    <div class="row clearfix">
        <h2>注册新账号.</h2>
        <hr/>
        <form id="signupform" class="col-md-7 column">
            <div class="form-group">
                <label for="uname">用户名</label>
                <input type="text" class="form-control" id="uname" name="uname"/>
            </div>
            <div class="form-group">
                <label for="uemail">电子邮箱</label>
                <input type="text" class="form-control" id="uemail" name="uemail"/>
            </div>
            <div class="form-group">
                <label for="uphone">手机号</label>
                <input type="text" class="form-control" id="uphone" name="uphone"/>
            </div>
            <div class="form-group">
                <label for="upasswd">密码</label>
                <input type="password" class="form-control" id="upasswd" name="upasswd"/>
            </div>
            <div class="form-group">
                <label for="upasswd_con">确认密码</label>
                <input type="password" class="form-control" id="upasswd_con" name="upasswd_con"/>
            </div>
            <button class="btn btn-default" type="submit">注册</button>
        </form>

        <div class="col-md-5 column">
        </div>
    </div>
</div>

</body>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="http://cdn.bootcss.com/js-sha1/0.4.1/sha1.min.js"></script>
<script src="http://cdn.bootcss.com/jquery-validate/1.16.0/jquery.validate.min.js"></script>
<script type="text/javascript">
    $().ready(function () {
        $("#signupform").validate({
            submitHandler: function () {
                $.post("/users/signup",
                    {
                        uemail: $("#uemail").val(),
                        uname: $("#uname").val(),
                        uphone: $("#uphone").val(),
                        upasswd: sha1($('#upasswd').val())
                    },
                    function (data) {
                        if (data == "true") {
                            location.href = "/";
                        } else {
                            alert("内部错误");
                        }
                    });
            },
            success:function(label){
                label.text("成功");
            },
            errorPlacement: function (error, element) {
                error.insertBefore(element);
            },
            errorElement: "h6",
            rules: {
                uemail: {
                    required: true,
                    email: true,
                    remote: {
                        url: "/users/checkonly",     //后台处理程序
                        type: "post",               //数据发送方式
                        dataType: "json",
                        data: {
                            uemail: function() {
                                return $("#uemail").val();
                            }
                        }
                    }
                },
                uname: {
                    required: true,
                    rangelength: [5, 20],
                    isuname: true
                },
                uphone: {
                    required: true,
                    isuphone: true
                },
                upasswd: {
                    required: true,
                    rangelength: [5, 20]
                },
                upasswd_con: {
                    required: true,
                    equalTo: "#upasswd"
                }
            },
            messages: {
                uemail: {
                    required: "请输入电子邮件地址",
                    email: "请输入正确格式的电子邮件",
                    remote: "此邮箱已被注册"
                },
                uname: {
                    required: "请输入用户名",
                    rangelength: "用户名长度范围为{0}-{1}"
                },
                uphone: {
                    required: "请输入手机号码"
                },
                upasswd: {
                    required: "请输入密码",
                    rangelength: "密码长度范围为{0}-{1}"
                },
                upasswd_con: {
                    required: "请再次输入密码",
                    equalTo: "两次输入的密码不一致"
                }
            }
        });
        $.validator.addMethod("isuphone",function(value){
            if(/^1[34578]\d{9}$/.test(value)){
                return true;
            }
            return false;
        },"手机号格式错误");
        $.validator.addMethod("isuname",function(value){
            if(/^[a-zA-Z0-9_]{5,20}$/.test(value)){
                return true;
            }
            return false;
        },"用户名应该只有字母数字下划线");
    });
</script>
<style>
    .error {
        color: #8a6d3b;
        display: inline
    }
</style>
</html>